<template>
    <el-tabs type="border-card" v-model="curTab">
        <el-tab-pane :label="item.name" :name="item.id" v-for="item of tabs">
            <el-table :data="tableData.list" style="width: 100%">
                <el-table-column prop="tid" label="tid"/>
                <el-table-column prop="title" label="标题"/>
            </el-table>
            <el-pagination
                :total="tableData.total"
                v-model:current-page="tableData.page"
                v-model:page-size="tableData.size"
                 :page-sizes="[10, 50, 100, 200]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
            />
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
import {ref, watch, reactive} from 'vue'
import wechatApi from '@/api/model/wechat.js'

const tabs = ref([])
const curTab = ref('')

/**
 * 表格相关字段
 */
const tableData = reactive({
    list: [],
    total: 0,
    page: 1,
    size: 10
})

watch(() => curTab.value, (id) => {
    console.log('curTab', id)
    if (id) {
        getPubTemplateTitleList()
    }
})

/**
 * 获取小程序服务类目
 * @returns {Promise<void>}
 */
async function getCategory() {
    const {code, data} = await wechatApi.getCategory.get()
    if (code === 200) {
        tabs.value = data.data
        curTab.value = data.data[0].id
    }
}

/**
 * 获取类目下公用模板列表
 */
async function getPubTemplateTitleList() {
    const {code, data} = await wechatApi.getPubTemplateTitleList.get({
        ids: curTab.value,
        start: (tableData.page - 1) * tableData.size,
        limit: tableData.size,
    })
    if (code === 200) {
        tableData.list = data.data
        tableData.total = data.count
    }
}

/**
 * 分页的每页数量改变
 * @param data
 */
function handleSizeChange(data) {
    tableData.size = data
    tableData.page = 1
    getPubTemplateTitleList()
}

/**
 * 分页的页码改变
 * @param data
 */
function handlePageChange(data) {
    tableData.page = data
    getPubTemplateTitleList()
}

getCategory()

</script>